<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局部组件2</title>
</head>
<body>
<!-- 不管全局还是局部组件 只能在Vue元素中使用 -->
<div id="app">
    <h3>app:</h3>
    <hello-com1></hello-com1>
    <hello-com></hello-com>
</div>
<div id="app">
    <h3>app:</h3>
    <!-- 都不生效 -->
    <hello-com1></hello-com1>
    <hello-com></hello-com>
</div>
<div id="bpp">
    <h3>bpp:</h3>
    <!-- 生效 -->
    <hello-com1></hello-com1>
    <!-- 不生效 -->
    <hello-com></hello-com>
</div>


<template id="globalTem">
    <div>
        <h3>全局组件</h3>
        <span v-text="msg"></span>
    </div>
</template>

<template id="AreaTem1">
    <div>
        <h3>局部组件</h3>
        <span v-text="msg"></span>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
    Vue.component(`helloCom1`, {
        data() {
            return {
                msg: `全局组件`
            }
        },
        template: `#globalTem`

    })

    let com1 = {
        data() {
            return {
                msg: `局部组件`
            }
        },
        template: `#AreaTem1`
    }
    const APP = new Vue({
        el: `#app`,
        components: {
            helloCom: com1
        }
    })
    const BPP = new Vue({
        el: `#bpp`
    })
</script>
</body>
</html>
